<template>
	<view class="page">
		<view class="order_main">
			<view class="order_num">
				订单编号：<text>202007050090876</text>
			</view>
			<view class="order_num">
				下单时间：<text>2020-07-01  17:00</text>
			</view>
			<view class="order_num">
				服务项目：<text>买菜做饭</text>
			</view>
			<view class="order_num">
				服务价格：<text>面议</text>
			</view>
			<view class="order_num">
				服务时间：<text>2020-07-05  11:00-12:00</text>
			</view>
			<view class="order_num">
				<uni-icons class="position_icon" type="location-filled" size="20" color="#565656"></uni-icons><text>新都-华城-二区16栋1单元1304</text>
			</view>
		</view>
		<view class="order-shop">
			<view class="title">商家信息</view>
			<view class="tearch_top">
				<view class="tearch_top_right">
					<view class="teacher_title">
						南山敬老院
						<image src="@/static/img/jing.png" mode=""></image>
						<text class="signName">金牌商家</text>
						<text class="authenName">营业资格认证</text>
					</view>
					<view class="tearch_detailsg_pingfen">
						<view class="rate">
							好评：<uni-rate class="pingfen" disabled="true" max="5" size="16" activeColor="#fe6a6a" :value="2"></uni-rate>
						</view>
						<view class="comment">
							累计服务次数：100
						</view>
					</view>
					<view class="text">距离我863m</view>
					<view class="text">联系地址：<uni-icons class="position_icon" type="location-filled" size="14" color="#b3b3b3"></uni-icons>
						羊山新区恒大名都1号楼</view>
				</view>
			</view>
		</view>
		<view class="order_btn_group clearfix">
			<view class="order_btn_2 fr">去付款</view>
			<view class="order_btn_1 fr">撤销订单</view>
			<view class="order_btn_1 fr" @click="handleEvaluate">去评价</view>
		</view>
	</view>
</template>

<script>
	import uniRate from '@/components/uni-ui/uni-rate/uni-rate.vue';
	export default {
		components: {
			uniRate
		},
		data() {
			return {
				
			}
		},
		methods: {
			handleEvaluate () {
				uni.navigateTo({
					url:'/pages/my/my_comments/evaluate'
				})
			}
		}
	}
</script>
<style>
	page {
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	.page {
		.order_main {
			padding: 33rpx 33rpx 0;
			border-bottom: 25rpx solid #F4F4F4;
			.order_num {
				line-height: 100%;
				padding-bottom: 33rpx;
				margin-bottom: 33rpx;
				border-bottom: 1px solid rgba($color: #ddd, $alpha: .3);
				font-size: 32rpx;
				color: #B3B3B3;
				text {
					font-size: 32rpx;
					color: #565656;
				}
				&:last-child {
					border-bottom: none;
				}
				.position_icon {
					padding-right: 10rpx;
				}
			}
		}
		.order-shop {
			.title {
				line-height: 100%;
				padding: 33rpx 33rpx 0;
				font-size: 36rpx;
				color: #B3B3B3;
			}
			border-bottom: 25rpx solid #F4F4F4;
		}
		.tearch_top {
			display: flex;
			background-color: #fff;
			padding: 33rpx;
		
			.tearch_top_right {
				width: 100%;
		
				.teacher_title {
					line-height: 100%;
					font-size: 32rpx;
					margin-bottom: 12rpx;
					vertical-align: middle;
					color: #565656;
					.signName {
						display: inline-block;
						margin-right: 22rpx;
						font-size: 26rpx;
						color: #F5CD4D;
					}
		
					.authenName {
						display: inline-block;
						padding: 0 8rpx;
						height: 32rpx;
						line-height: 32rpx;
						border-radius: 16rpx;
						border: 1px solid rgba(54, 138, 255, 1);
						font-size: 24rpx;
						color: rgba(54, 138, 255, 1);
					}
		
					image {
						position: relative;
						top: -1px;
						width: 32rpx;
						height: 32rpx;
						margin-left: 20rpx;
						vertical-align: middle;
					}
				}
		
				.rate {
					display: inline-block;
				}
		
				.tearch_detailsg_pingfen {
					width: 100%;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					margin-bottom: 17rpx;
		
					.rate {
						font-size: 26rpx;
						color: #FC503E;
						.pingfen {
							display: inline-block;
						}
					}
		
					.comment {
						font-size: 24rpx;
						color: #B3B3B3;
					}
				}
		
				.text {
					margin-bottom: 17rpx;
					line-height: 100%;
					font-size: 26rpx;
					color: #B3B3B3;
				}
		
				.text:last-child {
					margin-bottom: 0rpx;
				}
			}
		}
		.order_btn_group {
			padding: 33rpx 33rpx 0;
			view {
				margin-left: 33rpx;
			}
			.order_btn_1 {
				width: 161rpx;
				height: 63rpx;
				line-height: 61rpx;
				border-radius: 33rpx;
				border: 1px solid rgba(179, 179, 179, 1);
				box-sizing: border-box;
				text-align: center;
				font-size: 28rpx;
				color: #565656;
			}
		
			.order_btn_2 {
				width: 161rpx;
				height: 63rpx;
				line-height: 63rpx;
				background: rgba(54, 138, 255, 1);
				border-radius: 33rpx;
				text-align: center;
				font-size: 28rpx;
				color: #fff;
			}
		}
	}
</style>